<template>
  <!-- 删减商品/服务项目申请书 -->
  <div class="total">
    <h1>删减商品/服务项目申请书</h1>
    <el-form :label-position="right" label-width="250px" size="mini">
      <el-form-item label="申请人名称(中文) :">
        <span>{{record.appName}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.appNameEn}}</span>
      </el-form-item>
      <el-form-item label="申请人地址(中文) :">
        <span>{{record.busAddress}}</span>
      </el-form-item>
      <el-form-item label="(英文) :">
        <span>{{record.appAddEn}}</span>
      </el-form-item>
      <el-form-item label="邮政编码 :">
        <span>{{record.postCode}}</span>
      </el-form-item>
      <el-form-item label="联系人 :">
        <span>{{record.contacts}}</span>
      </el-form-item>

      <el-form-item label="邮箱 :">
        <span>{{record.email}}</span>
      </el-form-item>

      <el-form-item label="电话 :">
        <span>{{record.phone}}</span>
      </el-form-item>
      <el-form-item label="代理机构名称 :">
        <span>{{record.deptName}}</span>
      </el-form-item>
      <el-form-item label="商标申请号 :">
        <span>{{record.trademarkNum}}</span>
      </el-form-item>
      <el-form-item label="是否共有商标 :">
     
        <div>
          <span v-if="record.isShare == '1'" style="margin-left:0px">是</span>
          <span v-else style="margin-left:0px">否</span>
        </div>
      </el-form-item>
      <el-form-item label="类别 :">
        <span>{{record.model}}</span>
      </el-form-item>
      <el-form-item label="删减商品/服务项目(分类填写) :">
        <!-- <div v-for="(item,index) in record.deleteProjrct" :key="index">
          <span v-if="record.deleteProjrct != []">{{item}}</span>
        </div> -->
        <span>{{record.deleteProjrct}}</span>
      </el-form-item>
      <el-form-item label="营业执照:" class="busimg-img">
          <imgshow>
          <img :src="this.mconfig.host+record.busimg" class="busimgbb" alt />
          </imgshow>
      </el-form-item>
      <el-form-item label="身份证正反面 :" class="idcard-img" v-if="record.idcardimg">
         <imgshow>
          <img :src="this.mconfig.host+record.idcardimg" class="idcardbb" alt />
         </imgshow>
      </el-form-item>
      
      <el-form-item class="mar" label="网上确认书 :">
        <imgshow>
        <span class="qrfileBox"><img :src="imgURL(record.qrfile)" ></span>
        </imgshow>
      </el-form-item>

      <!--<el-form-item class="mar" label="其他附件 :" v-if="record.otherfile != []">-->
      <el-form-item class="mar" label="其他附件 :" v-if="record.otherfile.length>0">
        <imgshow v-for="(item,index) in record.otherfile" :key="index">
        <span class="qrfileBox"><img :src="imgURL(item)" ></span>
        </imgshow>
      </el-form-item>

    </el-form>
    <!-- 签字/章戳 -->
   
    <!-- 附页 -->
    <section>
      <div class="model-title" v-if="append.length">
        <h4>商标注销申请书</h4>
        <p>（附页）</p>
        <p style="font-size:16px;">其他共有人</p>
      </div>
      <proAppend class="part" :callback="append"></proAppend>
    </section>
    
  </div>
</template>
<script>
import imgshow from '../common/imgshow'
import proAppend from "../common/proAppend"
export default {
  name: "businessForm22",
  components:{
    imgshow,
    proAppend
  },
  data() {
    return {
      right: "right",
      record: {
        qrfile:"",
        email:"",
        id: "", //删减商品/服务项目申请
        ageName: "", // 代理机构名称
        appAddCn: "", //  申请人地址（中文）
        appAddEn: "", //   申请人地址（英文）
        appNameCn: "", //  申请人名称（中文）
        appNameEn: "", //  申请人名称（英文）
        branchNetworkId: "", //  网点编号
        confirmation: "", //  上传确认书：（图片）
        contacts: "", //  联系人
        deptName:'',
        deleteProjrct: "", //  删减商品/服务项目(分类填写)
        endWithdrawal: "", //  提前终止理由
        isShare: '', //  是否共享 1:是，0：否
        model: "", //  类别(必填)
        phone: "", //  电话
        postCode: "", //  邮政编码
        proAppendJson: "", //  共享人 json
        subStatus: "1", //   状态 1保存 2选择通过 3选择未通过 4未审核
        trademarkNum: "", //  商标申请号
        userId: "", //  用户id
        otherfile:[]
      },
      append: "", // 共有人
    };
  },
  methods: {
    imgURL(_url){
      var newUrl = this.mconfig.host + _url
      return newUrl
    },
    interface(s) {
      this.$http
        .get("/trademark/deleteApplicant/findByIdDetl", {
          params: { id: s },
        })
        .then((res) => {
          this.record = res.data.data.data;
          this.append = res.data.data.append;
          this.record.isShare = [this.record.isShare];
          // console.log(res.data.data.data);
          this.record.deleteProjrct = JSON.parse(this.record.deleteProjrct)
          this.record.otherfile = JSON.parse(this.record.otherfile)
          console.log(this.record.deleteProjrct)
        });
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.interface(this.id);
  },
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.mar{
  margin-top: 15px;
}
.part{
  margin-left: 240px;
}
.total {
  width: 1200px;
  /* margin: 0 auto; */
}
.total h1 {
  margin-left: 300px;
  padding: 30px 0;
  font-weight: 600;
  font-size: 25px;
}
.el-form {
  margin-left: 200px;
}
.total div {
  margin-bottom: 0;
}

.positions {
  margin: 30px 0;
}
.choice span {
  margin-left: 50px;
}

/* 签字 */
.sign {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}
.sign div {
  width: 200px;
  margin: 15px;
}
.sign div span {
  color: #000;
}
/* 代理人 */
.signs .agent {
  margin-top: 100px;
  margin-right: 350px;
  text-align: right;
}
.signs .careful {
  margin-top: 40px;
  margin-left: 310px;
  color: #999;
}

/* 附加页 */
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
.additional {
  margin-top: 150px;
  height: 300px;
}
.additional h2 {
  text-align: center;
  font-weight: 500;
}
.additional .other {
  margin-top: 40px;
}
.additional .other .main {
  text-align: center;
  margin-top: 20px;
}

.additional ul {
  margin-top: 50px;
  margin-left: 300px;
}
.additional ul li {
  margin: 10px 0;
}

.additional ul li span {
  display: inline-block;
  width: 106px;
  text-align: right;
  color: #000;
}

.additional ul li p {
  display: inline-block;
  margin-left: 300px;
  color: #ccc;
  margin-top: -8px;
}

.model-title {
  padding: 0 100px;
 
  color: #666;
  font-weight: 400;
  margin-bottom: 40px;
  margin-left: 220px;
}

.model-title p {
  margin: 10px 0;
  font-weight: 500;
}
.model-title p:nth-child(2){
  
  font-weight: 600;
}
.model-title p:nth-child(3){
  margin-left: 15px;
}

.model-title > h4 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 30px;

}
.seal {
  padding: 0 20px;
}
.seal-container {
  min-height: 150px;
}
.model-form{
  margin-bottom: 50px;
}
/* 签字 */
.signature {
  color: #ccc;
}
.busimgbb{
 
  margin: 5px;
}
.idcardbb{

  display: inline-block;
  margin:5px;
}
</style>